<div class="admin-content" id="accordion">
	<div class="am-cf am-padding">
		<div class="am-fl am-cf">
			<strong class="am-text-primary am-text-lg">产品</strong> / <small>Product</small>
		</div>
	</div>

	<div class="am-panel-default" ng-repeat="productCategory in productCategorys | filter:filterProduct">
		<div class="am-panel-hd">
			<h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-{{$index}}'}">{{productCategory.description}}</h4>
		</div>

		<div id="do-not-say-{{$index}}" class="am-panel-collapse am-collapse">
			<div class="am-panel-bd">
				<div class="alert alert-info">
					<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-3 am-margin gallery-list">
						<li ng-repeat="product in products[$index] | filter:filterProduct">
							<!-- 强行去边框 -->
							<div class="am-img-bdrs am-img-thumbnail" data-am-offcanvas="{target: '#doc-oc-demo3'}" style="border: none;" ng-click="getProduct(product.id)">
								<img class="am-img-thumbnail am-img-bdrs" ng-src="{{baseUrl+product.thumbId+formatImage}}" />
								<div class="gallery-list" style="padding-top: 3%;">
									<!-- 通过指令操控指定的对象 -->
									<input readonly class="am-form-field" type="text" ng-model="description" ng-init="description=product.description" />
								</div>
							</div>
							<div>
								<!-- <i  class="am-icon-close am-btn am-btn-default am-btn-xl am-round" ng-click="deleteproduct(product.id,product.category.id)"></i> -->
								<input switch-on-text="√" switch-off-text="×" ng-change="changeStatus(product)" bs-switch ng-model="product.status" type="checkbox" name="my-checkbox">
								<button class="am-btn am-btn-primary am-btn-sm" data-am-offcanvas="{target: '#product-detail'}" ng-click="showProductDetail(product.id,product.thumbId)">详情</button>
							</div>
						</li>
						<!--增加产品  -->
						<li>
							<div ng-model="formdata">
								<div>
									<!-- 增加  effect: 'push' 可以推动-->
									<i data-ng-click="add(productCategory.id,productCategory.description)" data-am-offcanvas="{target: '#doc-oc-demo3'}" class="am-icon-plus am-btn am-btn-default am-btn-xl am-round"></i>
								</div>
							</div>

						</li>
						<!-- 增加产品end -->
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- =================================================================================================================== -->
<div id="doc-oc-demo3" name="{{open}}" class="am-offcanvas" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
	<div class="am-offcanvas-bar am-offcanvas-bar-flip am-offcanvas-bar-overlay">
		<!--content start  -->
		<div class="am-offcanvas-content">
			<div class="am-cf am-padding">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">添加产品信息</strong> <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
				</div>
			</div>

			<hr>

			<div class="am-g" ng-model="nproduct">
				<form name="formName">
					<div class="am-u-sm-12 am-u-md-4 am-u-md-push-8">
						<div class="am-panel am-panel-default">
							<div class="am-panel-bd">
								<div class="am-g">
									<div class="am-u-md-4">
										<img class="am-img-circle am-img-thumbnail" data-am-modal="{target: '#my-actions'}" ng-src="{{ nproduct.thumbId? baseUrl+nproduct.thumbId+formatImage : 'sad.png' }}" alt="" ng-click="pass(nproduct.thumbId)" name="thumb" />
									</div>
									<div class="am-u-md-8">
										<div class="am-form-group">
											<input type="file" ng-file-select="onFileSelect($files)" />
											<p class="am-form-help">请选择要上传的文件</p>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="am-panel am-panel-default">
							<div class="am-panel-bd">
								<div class="alert alert-info">
									<ul class="am-avg-sm-4 am-avg-md-4 am-avg-lg-4 am-margin gallery-list">
										<li ng-repeat="image in images track by $index">
											<!-- 强行去边框 -->
											<div class="am-img-bdrs am-img-thumbnail" style="border: none;">
												<img required ng-click="pass(image)" data-am-modal="{target: '#my-actions'}" class="am-img-thumbnail am-img-bdrs" name="images" ng-src="{{  baseUrl+image+formatImage }}" />
											</div>
											<div>
												<label class="am-icon-close" style="padding-left: 10%" data-ng-click="deleteimage($index)"></label>
											</div>
										</li>
										<li>
											<div class="gallery-list" style="padding-top: 3%;">
												<input type="file" ng-file-select="onFileSelectadd($files)" />
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>

					</div>
					<!--表单验证  -->

					<div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4">
						<div class="am-form am-form-horizontal">
							<div class="am-form-group">
								<label class="am-u-sm-3 am-form-label">产品描述</label>
								<div class="am-u-sm-9">
									<input required ng-model="nproduct.description" placeholder="请输入产品描述" type="text">
								</div>
							</div>

							<div class="am-form-group">
								<label class="am-u-sm-3 am-form-label">价格</label>
								<div class="am-u-sm-9">
									<input required ng-model="nproduct.price" placeholder="输入单价" type="number">
								</div>
							</div>

							<div class="am-form-group">
								<label class="am-u-sm-3 am-form-label">规格</label>
								<div class="am-u-sm-9">
									<input required ng-model="nproduct.specification" placeholder="输入规格" type="text">
								</div>
							</div>

							<div class="am-form-group">
								<label class="am-u-sm-3 am-form-label">存货量</label>
								<div class="am-u-sm-9">
									<input required ng-model="nproduct.amount" placeholder="输入货存量" type="number">
								</div>
							</div>

							<div class="am-form-group">
								<label class="am-u-sm-3 am-form-label">产品品类</label>
								<!--存储品类信息  -->
								<div class="am-u-sm-9">
									<!-- 初始化产品品类  -->
									<label ng-model="nproduct.category.id" ng-show=false></label> <input ng-model="nproduct.category.description" readonly=true type="text">
								</div>
							</div>

							<div class="am-form-group">
								<label class="am-u-sm-3 am-form-label">备注</label>
								<div class="am-u-sm-9">
									<input ng-model="nproduct.note" placeholder="输入产品备注" type="text">
								</div>
							</div>

							<div class="am-form-group">
								<div class="am-u-sm-9 am-u-sm-push-3">
									<button data-ng-disabled="formName.$invalid" type="button" class="am-btn am-btn-primary" ng-click="submitdata(nproduct,formName.$pristine)">保存修改</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
			<button class="am-btn am-btn-primary doc-oc-js" data-rel="close">关闭侧边栏</button>
		</div>
		<script>
			$(function() {
				var id = '#doc-oc-demo3';
				var $myOc = $(id);
				//console.log($myOc[0].attributes.name.value);
				$('.doc-oc-js').on('click', function() {
					$myOc[0].attributes.name.value = "";
					$myOc.offCanvas($(this).data('rel'));
					$myOc[0].attributes.name.value = "open";
				});

				var productid = '#product-detail';
				var $myOcProduct = $(productid);
				//console.log($myOc[0].attributes.name.value);
				$('.doc-oc-js').on('click', function() {
					$myOcProduct[0].attributes.name.value = "";
					$myOcProduct.offCanvas($(this).data('rel'));
					$myOcProduct[0].attributes.name.value = "open";
				});
			});
		</script>
	</div>
</div>
<!-- 	商品详情侧边栏 -->
<div id="product-detail" name="{{open}}" class="am-offcanvas" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
	<div style="background: white; width: 50%; border: none;" class="am-offcanvas-bar am-offcanvas-bar-flip am-offcanvas-bar-overlay">
		<!--content start  -->
		<div class="am-u-sm-12">
			<div class="am-cf am-padding">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">添加产品详情</strong> <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
				</div>
			</div>

			<div class="am-form am-form-horizontal ">
				<!-- 强行去边框 -->
				<div class="am-img-bdrs am-u-sm-centered am-u-sm-8 am-u-end" style="border: none;">
					<img data-ng-src="{{ showProductImageId? baseUrl+showProductImageId : 'sad.png'}} " />
				</div>
			</div>

			<hr>

			<div class="am-g">
				<form name="formName">
					<div class="am-panel-default">
						<ul class="am-avg-sm-1 am-avg-md-1 am-avg-lg-1 am-margin gallery-list">
							<li ng-repeat="topbanner in productDetailItems track by $index | filter:showPicture(topbanner) ">
								<div class="am-g">

									<div class="am-form-group am-cf am-fr">
										<div class="am-btn-group-stacked">
											<button type="button" class="am-btn am-btn-primary" ng-click="deletetopbanner(productDetailItems,topbanner)">删除</button>
										</div>
									</div>

									<div class="am-form am-form-horizontal">
										<!-- 强行去边框 -->
										<div class="am-img-bdrs am-img-thumbnail am-u-sm-8 am-u-end" style="border: none;">
											<img data-ng-click="pass(topbanner.showimageId)" data-ng-src="{{ topbanner.image ? baseUrl+topbanner.showimageId : 'sad.png'  }}" />
										</div>
										<div>
											<input type="file" data-ng-file-select="uploadProductDetail($files,topbanner)" />
										</div>
									</div>

									<div class="am-u-sm-12 am-padding-vertical-sm am-u-end" style="padding-left: 0%;padding-right: 0%;">
										<textarea rows="3" style="width: 100%;border: none;" data-ng-init="topbanner.status=true" data-ng-model="topbanner.detail" placeholder="请输入描述"></textarea>
									</div>
								</div>
								<hr>
							</li>
							<!-- 显示结束 -->
							<li>
								<div ng-model="formdata">
									<div>
										<button ng-click="addProductDetail()" class="am-btn am-btn-default am-round">
											<i class="am-icon-plus am-icon-lg"></i>
										</button>
										<button ng-disabled="formName.$invalid" type="button" class="am-btn am-btn-primary" data-ng-click="savaData(productDetailItems)">保存</button>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</form>
			</div>
			<button class="am-btn am-btn-primary doc-oc-js" data-rel="close">关闭侧边栏</button>
		</div>
	</div>
</div>
<!-- ============================================================================================================  -->
